<template>
  <div ref="mapContainer" style="width: 100%; height:100%;"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader';

// 配置信息
let props = defineProps(['config']);
let emit = defineEmits(['mapReady']);
// 设置安全密钥
window._AMapSecurityConfig = {
  securityJsCode: "06fe26b9cf15936e0a13a1a3a89345d0",
};

// 创建地图容器
const mapContainer = ref(null);

let map = null;

onMounted(() => {
  initMap(props.config);
});
function initMap(config) {
  AMapLoader.load({
    key: 'e94e0cba96c8204ea03f1c40710d543d', // 高德地图API Key
    version: '2.0', // 指定API版本
    plugins: ['AMap.Geolocation', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.PolygonEditor'], // 需要使用的插件
  }).then((AMap) => {
    map = new AMap.Map(mapContainer.value, {
      zoom: config.zoom || 11, // 初始缩放级别
      center: config.center, // 初始中心点坐标
    });

    map.on('complete', () => {
      console.log('地图加载完成');
      emit('mapReady', {
        map: map,
        AMap: AMap
      })
    });

  }).catch((e) => {
    console.error(e);
  });


}



</script>

<style scoped lang='scss'></style>
